<%@ page import="com.ws.haungjia.utils.Res" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>路线管理</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/font-awesome.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap-datepicker.min.css">
    <style>
        .route-img {
            height: 100px;
            object-fit: cover;
        }
        .table-actions {
            white-space: nowrap;
        }
        .upload-area {
            border: 2px dashed #ccc;
            padding: 20px;
            text-align: center;
            margin-bottom: 20px;
            cursor: pointer;
        }
        .upload-area:hover {
            border-color: #aaa;
        }
        .status-badge {
            font-size: 12px;
            padding: 5px 8px;
            border-radius: 3px;
        }
        .status-active {
            background-color: #28a745;
            color: white;
        }
        .status-inactive {
            background-color: #6c757d;
            color: white;
        }
        .status-full {
            background-color: #dc3545;
            color: white;
        }
        /* 分页样式 */
        .pagination-container {
            margin-top: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
        }

        .pagination-container a,
        .pagination-container span {
            display: inline-block;
            padding: 8px 12px;
            margin: 0 5px;
            border: 1px solid #dee2e6;
            color: #007bff;
            text-decoration: none;
            border-radius: 4px;
            transition: all 0.3s ease;
        }

        .pagination-container a:hover {
            background-color: #e9ecef;
            border-color: #dee2e6;
        }

        .pagination-container span {
            color: #6c757d;
            background-color: #f8f9fa;
            border-color: #dee2e6;
        }

        .pagination-container .active-page {
            background-color: #007bff;
            color: white;
            border-color: #007bff;
        }

        .pagination-info {
            width: 100%;
            text-align: center;
            margin-top: 10px;
            color: #6c757d;
            font-size: 14px;
        }
    </style>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <h2>路线管理</h2>
            <div class="card">
                <div class="card-header">
                    <a class="btn btn-primary" href="${pageContext.request.contextPath}/luxing/chafenshang">
                        添加路线
                    </a>
                    <form class="float-right form-inline" action="${pageContext.request.contextPath}/luxing/sousuo" method="get">
                        <!-- 路线名称搜索框 -->
                        <input type="text" class="form-control mr-2" name="name" placeholder="路线名称..."
                               value="${luxianhuixian.name}" style="width: 150px;">

                        <!-- 最低价格 -->
                        <input type="number" class="form-control mr-2" name="min" placeholder="最低价"
                               value="${luxianhuixian.min}" style="width: 100px;">

                        <!-- 最高价格 -->
                        <input type="number" class="form-control mr-2" name="max" placeholder="最高价"
                               value="${luxianhuixian.max}" style="width: 100px;">

                        <!-- 路线状态下拉框 -->
                        <select class="form-control mr-2" name="zhuangtai" style="width: 120px;">
                            <option value="">所有状态</option>
                            <option value="1" ${param.status == '1' ? 'selected' : ''}>上架</option>
                            <option value="2" ${param.status == '2' ? 'selected' : ''}>下架</option>
                        </select>

                        <!-- 商家选择 -->
                        <select class="form-control mr-2" name="sname" style="width: 120px;">
                            <option value="">商家</option>
                            <c:forEach items="${shangj}" var="shang">
                                <option value="${shang.sname}">${shang.sname}</option>
                            </c:forEach>
                        </select>
                        <!-- 分类选择 -->
                        <select class="form-control mr-2" name="fname" style="width: 120px;">
                            <option value="">所有分类</option>
                        <c:forEach items="${fenlie}" var="fenlei">
                            <option value="${fenlei.fname}">${fenlei.fname}</option>
                        </c:forEach>
                        </select>
<%--                        <select class="form-control mr-2" name="category" style="width: 120px;">--%>
<%--                            <option value="">所有分类</option>--%>
<%--                            <option value="1" ${param.category == '1' ? 'selected' : ''}>国内游</option>--%>
<%--                            <option value="2" ${param.category == '2' ? 'selected' : ''}>出境游</option>--%>
<%--                            <option value="3" ${param.category == '3' ? 'selected' : ''}>周边游</option>--%>
<%--                        </select>--%>

                        <!-- 出发地 -->
                        <input type="text" class="form-control mr-2" name="chufadi" placeholder="出发地"
                               value="${luxianhuixian.chufadi}" style="width: 120px;">

                        <!-- 目的地 -->
                        <input type="text" class="form-control mr-2" name="mdidi" placeholder="目的地"
                               value="${luxianhuixian.mdidi}" style="width: 120px;">

                        <!-- 搜索按钮 -->
                        <input type="submit" value="搜索">
                    </form>
                </div>
                <div class="card-body">
                    <table class="table table-bordered table-hover">
                        <thead>
                        <tr>
                            <th width="5%">ID</th>
                            <th width="10%">主图</th>
                            <th width="10%">分类</th>
                            <th width="10%">路线名称</th>
                            <th width="8%">价格</th>
                            <th width="8%">出发地</th>
                            <th width="10%">目的地</th>
                            <th width="8%">天数</th>
                            <th width="8%">商家</th>
                            <th width="8%">最大人数</th>
                            <th width="8%">状态</th>
                            <th width="10%" class="table-actions">操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <c:forEach items="${pageInfo.list}" var="route">
                            <tr>
                                <td>${route.packageID}</td>
                                <td>
                                <img src="<%=Res.fileUri%>${route.zhutu}" width="100px" height="100px">
                                </td>
                                <td>${route.fenlie.fname}</td>
                                <td>${route.name}</td>
                                <td>${route.jiage}</td>
                                <td>${route.chufadi}</td>
                                <td>${route.mdidi}</td>
                                <td>${route.tianshu}</td>
                                <td>${route.shangjia.sname}</td>
                                <td>${route.renshu}</td>
                                <td>
                                        <c:if test="${route.zhuangtai == 1}">
                                            <span class="status-badge status-active">活跃</span>
                                        </c:if>
                                        <c:if test="${route.zhuangtai == 2}">
                                            <span class="status-badge status-inactive">下架</span>
                                        </c:if>
                                </td>
                                <td>
                                    <a href="${pageContext.request.contextPath}/luxing/shan?id=${route.packageID}"class="btn btn-sm btn-primary">删除</a>
                                    <a href="${pageContext.request.contextPath}/luxing/huixian?id=${route.packageID}"class="btn btn-sm btn-primary">修改</a>
                                    <a href="${pageContext.request.contextPath}/lunbo/zengjia/?packageID=${route.packageID}"class="btn btn-sm btn-primary">设为轮播</a>
                                    <a href="${pageContext.request.contextPath}/fushu/chaxun/?id=${route.packageID}"class="btn btn-sm btn-primary">查看附属图</a>
                                </td>/
                            </tr>
                        </c:forEach>
                        </tbody>
                    </table>
                    <div class="pagination-container">
                        <c:set var="startPage" value="1" />
                        <c:set var="endPage" value="10" />
                        <c:choose>
                            <c:when test="${pageInfo.pageNum <= 5}">
                                <c:set var="endPage" value="${pageInfo.pages < 10 ? pageInfo.pages : 10}" />
                            </c:when>
                            <c:when test="${pageInfo.pageNum > 5 && pageInfo.pageNum <= pageInfo.pages - 5}">
                                <c:set var="startPage" value="${pageInfo.pageNum - 4}" />
                                <c:set var="endPage" value="${pageInfo.pageNum + 5}" />
                            </c:when>
                            <c:otherwise>
                                <c:set var="startPage" value="${pageInfo.pages - 9}" />
                                <c:set var="endPage" value="${pageInfo.pages}" />
                            </c:otherwise>
                        </c:choose>

                        <c:if test="${startPage < 1}">
                            <c:set var="startPage" value="1" />
                        </c:if>

                        <!-- 上一页按钮 -->
                        <c:if test="${pageInfo.pageNum > 1}">
                            <a href="${pageContext.request.contextPath}/huser/sousuo?ye=${pageInfo.pageNum-1}&ge=${huixian.geshu}&mouhu=${huixian.mouhu}">
                                &laquo; 上一页
                            </a>
                        </c:if>

                        <!-- 页码 -->
                        <c:forEach var="i" begin="${startPage}" end="${endPage}">
                            <c:choose>
                                <c:when test="${i == pageInfo.pageNum}">
                                    <span class="active-page">${i}</span>
                                </c:when>
                                <c:otherwise>
                                    <a href="${pageContext.request.contextPath}/huser/sousuo?ye=${i}&ge=${huixian.geshu}&mouhu=${huixian.mouhu}">${i}</a>
                                </c:otherwise>
                            </c:choose>
                        </c:forEach>

                        <!-- 下一页按钮 -->
                        <c:if test="${pageInfo.pageNum < pageInfo.pages}">
                            <a href="${pageContext.request.contextPath}/huser/sousuo?ye=${pageInfo.pageNum+1}&ge=${huixian.geshu}&mouhu=${huixian.mouhu}">
                                下一页 &raquo;
                            </a>
                        </c:if>

                        <div class="pagination-info">
                            第${pageInfo.pageNum}页/共${pageInfo.pages}页 |
                            共${pageInfo.total}条数据 | 每页显示${pageInfo.pageSize}条
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>